<template>
  <div class="login">
    <div class="top" @click="$router.push('/faxian')">立即体验 <van-icon name="arrow" /></div>
    <div class="Logo-box">
      <img src="../../assets/Logo/Logo.jpg" alt="" class="Logo" />
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="phone"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
      <div class="rightreg" @click="goreg">
        暂无账号？去注册>
      </div>
      <div class="iconfont">
        <img src="../../assets/Logo/QQ.png" alt="" />
        <img src="../../assets/Logo/weibo.png" alt="" />
        <img src="../../assets/Logo/wangyi.png" alt="" />
      </div>
    </van-form>
    <div class="agreement">
      <van-checkbox v-model="checked" shape="square"
        >用意 <span>用户协议、意思政策、等服务协议</span></van-checkbox
      >
    </div>
  </div>
</template>

<script>
import { Login } from "../../api/music";
import { Toast } from "vant";
export default {
  data() {
    return {
      checked: true,
      username: "",
      password: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    onSubmit(values) {
      console.log("submit", values);
      const { phone, password } = values;
      this.getLogin(phone, password);
    },

    //登录
    async getLogin(phone, password) {
      const result = await Login(phone, password);
      console.log(result);
      if (result.code == 200) {
        Toast("登录成功");
        localStorage.setItem("token", result.token);
        localStorage.setItem("id", result.account.id);
        this.$router.push(`/mine`);
      }
    },
    //跳转注册页面
    goreg(){
      this.$router.push("/reg")
    }
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.van-form {
  padding: 10px;
  padding-top: 30vh;
  width: 80vw;
  margin: 0 auto;
}
.login {
  width: 100vw;
  height: 100vh;
  background-color: rgb(231, 0, 18);
}
.iconfont {
  position: relative;
  left: 30vw;
  padding: 10px;
  width: 50vw;
  display: flex;
  justify-content: space-evenly;
}
.iconfont img {
  color: white;
  width: 8vw;
  border: 1px solid white;
  border-radius: 50%;
}
.Logo-box {
  height: 20vw;
}
.Logo-box .Logo {
  width: 25vw;
  position: relative;
  left: 140px;
  top: 80px;
}
.van-button {
  border-radius: 30px;
  background-color: #c40616;
  border: none;
}
.agreement {

  padding-left: 40px;
  font-size: 10px;
}
.agreement span {
  color: white;
  font-size: 10px;
}
.rightreg{
  float: right;
  color: aliceblue;
  font-size: 14px;
}
.top{
  float: right;
  padding: 10px;
}
</style>